import React from 'react';
import '@/styles/_idc.scss';
import { Button } from 'antd';
import { postFn } from "@/api/commonApi";
import { PrCom, FaaCom } from './component';
import { idcApiCfg } from '@/api/idcApi';
import { withRouter } from 'react-router-dom'
class Idc extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            idcData: {},
        };
    }
    componentDidMount() {
        this.getIdcData(this.props.match.params.code);

    }
    componentDidUpdate(nextProps: any) {
        // 路由变化
        if (this.props.location !== nextProps.location) {
            let currentUrl = this.props.match.params.code;
            this.getIdcData(currentUrl);
        }
    }
    render() {
        return (
            <div className="i7b-idc">
                <div className="i-i-h">
                    <div className="i-i-h-c common-width">
                        <h1>{this.state.idcData.title}</h1>
                        <div className="idc-desc">
                            {this.state.idcData.desc}
                        </div>
                        <div>
                            <Button type="primary" href="#/cloudServer/dc">机房介绍</Button>
                            <Button style={{ marginLeft: 30 }} href="tencent://Message/?Uin=2152860&amp;websiteName=q-zone.qq.com&amp;Menu=yes">咨询客服</Button>
                        </div>
                        <div className="idc-nav">
                            <ul>
                                {idcApiCfg.navList.map((item: any, i: number) => {
                                    return (
                                        <li key={i}>
                                            <span className={`${i === 0 ? 'active' : ""}`} onClick={this.goAnchor.bind(this, item.code)}>{item.title}</span>
                                        </li>
                                    )
                                })}
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="i-i-b">
                    {idcApiCfg.navList.map((item: any, i: number) => {
                        return (
                            <div key={i} className="common-width module" id={item.code}>
                                <h3 className="i-i-b-title">{item.title}</h3>
                                <div className="i-i-b-content">
                                    {(() => {
                                        switch (item.code) {
                                            case "pr": return <PrCom prData={idcApiCfg.prData} />
                                            case "faa": return <FaaCom faaData={idcApiCfg.faaData} />
                                        }
                                    }
                                    )()}
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }

    // 跳转锚点
    goAnchor(id: string) {
        let div: any = document.getElementById(id);
        div.scrollIntoView({ behavior: "smooth", block: "center", inline: "start" });
    }

    async getIdcData(code: string) {
        let res: any = await postFn('getIdc', { code: code });
        if (!res) return;
        if (!res.data[0]) {
            this.props.history.push('/404');
            return;
        }
        this.setState({ idcData: res.data[0] });
    }
}
export default withRouter(Idc)